<template>
    <!--策略管理-->
    <div class="clgl_wrap">

        <div class="page-content">
            <div class="tab-box">
                <span :class="`is_hover ${ tabActIndex === 1 ? 'is_act' : '' }`" @click="tabClick( 1 )">能量优化控制</span>
                <span :class="`is_hover ${ tabActIndex === 2 ? 'is_act' : '' }`" @click="tabClick( 2 )">调度组合计划</span>

                <el-button type="primary" v-if="tabActIndex === 2" @click="switchChange()">配置</el-button>
            </div>

            <div class="panel-box" v-if="tabActIndex===1">
                <div class="panel-item">
                    <div class="item-head">
                        <img class="item-head-icon" src="../../assets/images/clgl/icon_1.png" alt="">
                        <span class="item-head-title">高效供能</span>
                        <el-switch
                                v-model="value"
                                active-color="#2C50EE"
                                :width="64"
                                class="hy_switch"
                                @change="switchChange()"
                                inactive-color="#CFD1D8">
                        </el-switch>
                    </div>

                    <div class="chart-box" ref="radarChart1"></div>
                </div>

                <div class="panel-item">
                    <div class="item-head">
                        <img class="item-head-icon" src="../../assets/images/clgl/icon_2.png" alt="">
                        <span class="item-head-title">经济供能</span>
                        <el-switch
                                v-model="value"
                                active-color="#2C50EE"
                                :width="64"
                                class="hy_switch"
                                @change="switchChange()"
                                inactive-color="#CFD1D8">
                        </el-switch>
                    </div>

                    <div class="chart-box" ref="radarChart2"></div>
                </div>

                <div class="panel-item">
                    <div class="item-head">
                        <img class="item-head-icon" src="../../assets/images/clgl/icon_3.png" alt="">
                        <span class="item-head-title">低碳供能</span>
                        <el-switch
                                v-model="value"
                                active-color="#2C50EE"
                                :width="64"
                                class="hy_switch"
                                @change="switchChange()"
                                inactive-color="#CFD1D8">
                        </el-switch>
                    </div>

                    <div class="chart-box" ref="radarChart3"></div>
                </div>

                <div class="panel-item">
                    <div class="item-head">
                        <img class="item-head-icon" src="../../assets/images/clgl/icon_4.png" alt="">
                        <span class="item-head-title">稳定供能</span>
                        <el-switch
                                v-model="value"
                                active-color="#2C50EE"
                                :width="64"
                                class="hy_switch"
                                @change="switchChange()"
                                inactive-color="#CFD1D8">
                        </el-switch>
                    </div>

                    <div class="chart-box" ref="radarChart4"></div>
                </div>
            </div>

            <div class="panel-box" v-if="tabActIndex===1">
                <div class="panel-item">
                    <div class="item-box">
                        <div class="item-num">12.32<span>kWh/tOO2</span></div>
                        <div class="item-label">碳排放强度</div>
                    </div>
                    <div class="item-box">
                        <div class="item-num">98.32<span>%</span></div>
                        <div class="item-label">绿色供能占比</div>
                    </div>
                    <div class="item-box">
                        <div class="item-num">86.79<span>%</span></div>
                        <div class="item-label">供能损耗率</div>
                    </div>
                    <div class="item-box">
                        <div class="item-num">98.32<span>%</span></div>
                        <div class="item-label">综合能效</div>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="chart-box" ref="lineChart"></div>
                </div>
            </div>

            <div class="panel-box is_composite_plan" v-if="tabActIndex===2">
                <div class="panel-item">
                    <div class="item-label">组合A</div>
                    <el-switch
                            v-model="value"
                            active-color="#2C50EE"
                            :width="64"
                            class="hy_switch"
                            inactive-color="#CFD1D8">
                    </el-switch>
                </div>
                <div class="panel-item">
                    <div class="item-label">组合B</div>
                    <el-switch
                            v-model="value"
                            active-color="#2C50EE"
                            :width="64"
                            class="hy_switch"
                            inactive-color="#CFD1D8">
                    </el-switch>
                </div>
                <div class="panel-item">
                    <div class="item-label">组合C</div>
                    <el-switch
                            v-model="value"
                            active-color="#2C50EE"
                            :width="64"
                            class="hy_switch"
                            inactive-color="#CFD1D8">
                    </el-switch>
                </div>
                <div class="panel-item">
                    <div class="item-label">组合D</div>
                    <el-switch
                            v-model="value"
                            active-color="#2C50EE"
                            :width="64"
                            class="hy_switch"
                            inactive-color="#CFD1D8">
                    </el-switch>
                </div>
            </div>

            <div class="panel-box is_composite_plan" v-if="tabActIndex===2">
                <div class="left-panel">
                    <div class="panel-title">运行策略流程图</div>

                    <div class="panel-btn">最大化新能源消纳</div>

                    <div class="panel-content">
                        <div class="flow-label is_white">开始</div>
                        <div class="flow-label">步骤一</div>
                        <div class="flow-label">步骤二</div>
                        <div class="flow-label">步骤三</div>
                        <div class="flow-label">步骤四</div>
                        <div class="flow-label is_white">结束</div>
                    </div>
                </div>
                <div class="right-panel">
                    <div class="panel-item">
                        <div class="item-box">
                            <div class="item-num">12.32<span>kWh/tOO2</span></div>
                            <div class="item-label">碳排放强度</div>
                        </div>
                        <div class="item-box">
                            <div class="item-num">98.32<span>%</span></div>
                            <div class="item-label">绿色供能占比</div>
                        </div>
                        <div class="item-box">
                            <div class="item-num">86.79<span>%</span></div>
                            <div class="item-label">供能损耗率</div>
                        </div>
                        <div class="item-box">
                            <div class="item-num">98.32<span>%</span></div>
                            <div class="item-label">综合能效</div>
                        </div>
                    </div>
                    <div class="panel-item" ref="lineChart1"></div>
                </div>
            </div>

            <div class="panel-box">
                <div class="panel-title">能流桑基图</div>

                <div class="flow-box">
                    <div>
                        <span class="flow-label">光伏发电系统<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">汇能变压器<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">电解水制氢系统<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">储氢罐<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">电网<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">用电负荷<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">用氢车<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">加氢机<br/>碳排放量：3829.09吨</span>
                        <span class="flow-label">#2氢燃料电池<br/>碳排放量：3829.09吨</span>
                    </div>

                    <div>
                        <span class="flow-value">能流功率：32.4KW</span>
                        <span class="flow-value">能流功率：32.4KW</span>
                        <span class="flow-value">能流功率：32.4KW</span>
                        <span class="flow-value is_top">碳流率：32kg/s</span>
                        <span class="flow-value is_top">碳流率：32kg/s</span>
                        <span class="flow-value is_right">能流功率：32.4KW</span>
                        <span class="flow-value is_left">碳流率：32kg/s</span>
                        <span class="flow-value">能流功率：32.4KW</span>
                        <span class="flow-value is_top">碳流率：32kg/s</span>
                        <span class="flow-value is_right">能流功率<br/>32.4KW</span>
                        <span class="flow-value is_left">碳流率<br/>32kg/s</span>
                        <span class="flow-value">能流功率：32.4KW</span>
                        <span class="flow-value is_top">碳流率：32kg/s</span>
                        <span class="flow-value">能流功率<br/>32.4KW</span>
                        <span class="flow-value is_top">碳流率：32kg/s</span>
                        <span class="flow-value">能流功率：32.4KW</span>
                        <span class="flow-value is_top">碳流率：32kg/s</span>
                    </div>
                </div>
            </div>

            <div class="panel-box">
                <div class="panel-title">碳流桑基图</div>
                <div class="chart-box" ref="sankeyChart"></div>
            </div>

            <div class="head-switch">
                <span class="head-switch-text">能量管理总策略投退</span>
                <el-switch
                        v-model="value"
                        active-color="#2C50EE"
                        :width="64"
                        class="hy_switch"
                        @change="switchChange()"
                        inactive-color="#CFD1D8">
                </el-switch>
            </div>

            <ControlDialog ref="controlDialog"
                           :dialogTitle="dialogTitle"
            ></ControlDialog>
        </div>

    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                tabActIndex: 1,
                value: true,
                lineChart: null,
                lineChart1: null,
                radarChart1: null,
                radarChart2: null,
                radarChart3: null,
                radarChart4: null,
                dialogTitle: '控制类弹窗',
            }
        },
        methods: {
            tabClick( index ) {
                this.tabActIndex = index;

                if( this.lineChart ) {
                    this.lineChart.dispose();
                }

                if( this.lineChart1 ) {
                    this.lineChart1.dispose();
                }

                if( this.radarChart1 ) {
                    this.radarChart1.dispose();
                }

                if( this.radarChart2 ) {
                    this.radarChart2.dispose();
                }

                if( this.radarChart3 ) {
                    this.radarChart3.dispose();
                }

                if( this.radarChart4 ) {
                    this.radarChart4.dispose();
                }

                if( index === 1 ) {
                    this.$nextTick(()=> {
                        this.radarChartLoad(
                            {
                                indicator: [
                                    { name: '供能设备A', max: 300 },
                                    { name: '供能设备B', max: 300 },
                                    { name: '供能设备C', max: 300 },
                                    { name: '供能设备D', max: 300 },
                                    { name: '供能设备E', max: 300 },
                                    { name: '供能设备F', max: 300 },
                                ],
                                value: [203, 133, 250, 130, 129, 130, 110, ],
                                id: 'radarChart1',
                            }
                        );

                        this.radarChartLoad(
                            {
                                indicator: [
                                    { name: '供能设备A', max: 300 },
                                    { name: '供能设备B', max: 300 },
                                    { name: '供能设备C', max: 300 },
                                    { name: '供能设备D', max: 300 },
                                    { name: '供能设备E', max: 300 },
                                    { name: '供能设备F', max: 300 },
                                ],
                                value: [203, 133, 250, 130, 129, 130, 110, ],
                                id: 'radarChart2',
                            }
                        );

                        this.radarChartLoad(
                            {
                                indicator: [
                                    { name: '供能设备A', max: 300 },
                                    { name: '供能设备B', max: 300 },
                                    { name: '供能设备C', max: 300 },
                                    { name: '供能设备D', max: 300 },
                                    { name: '供能设备E', max: 300 },
                                    { name: '供能设备F', max: 300 },
                                ],
                                value: [203, 133, 250, 130, 129, 130, 110, ],
                                id: 'radarChart3',
                            }
                        );

                        this.radarChartLoad(
                            {
                                indicator: [
                                    { name: '供能设备A', max: 300 },
                                    { name: '供能设备B', max: 300 },
                                    { name: '供能设备C', max: 300 },
                                    { name: '供能设备D', max: 300 },
                                    { name: '供能设备E', max: 300 },
                                    { name: '供能设备F', max: 300 },
                                ],
                                value: [203, 133, 250, 130, 129, 130, 110, ],
                                id: 'radarChart4',
                            }
                        );

                        this.chartLoad(
                            {
                                names: ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',],
                                value: [
                                    [233, 233, 200, 180, 199, 233, 210,153, 133, 100, 180, 199, 233, 210,233, 233, 200, 180, ],
                                ],
                                id: 'lineChart',
                                title: '功率（kW）',
                            }
                        );
                    })
                }else {
                    this.$nextTick(()=> {
                        this.chartLoad(
                            {
                                names: ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',],
                                value: [
                                    [233, 233, 200, 180, 199, 233, 210,153, 133, 100, 180, 199, 233, 210,233, 233, 200, 180, ],
                                ],
                                id: 'lineChart1',
                                title: '功率（kW）',
                            }
                        );
                    })
                }
            },

            radarChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    radar: {
                        // shape: 'circle',
                        radius: 60,
                        name: { // (圆外的标签)雷达图每个指示器名称的配置项。
                            formatter: function (value, indicator) {
                                return value;
                            },
                            textStyle: {
                                fontSize: 14,
                                color: '#535763'
                            }
                        },
                        nameGap: 10,
                        axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
                            lineStyle: {
                                color: '#D7DDFC',
                                // 坐标轴线线的颜色。
                                width: 1,
                                // 坐标轴线线宽。
                                type: 'solid',
                                // 坐标轴线线的类型。
                            }
                        },
                        splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
                            lineStyle: {
                                color: ['#3B5DF0','#D7DDFC','#D7DDFC','#D7DDFC','#D7DDFC'],
                                // 分隔线颜色
                                width: 1,
                                // 分隔线线宽
                            }
                        },
                        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                            show: true,
                            areaStyle: { // 分隔区域的样式设置。
                                color: [ '#C7D1FB', '#DCE1FD','#EBEEFE', '#F7F8FF', '#ffffff' ],
                            }
                        },
                        indicator: obj.indicator,
                    },
                    series: [
                        {
                            name: '',
                            type: 'radar',
                            symbolSize: 5,
                            symbol: 'circle',
                            itemStyle: { // 单个拐点标志的样式设置。
                                color: 'rgba(44,80,238,1)',
                                borderColor: '#ffffff',
                                // 拐点的描边颜色。[ default: '#000' ]
                                borderWidth: 1.5,
                                // 拐点的描边宽度，默认不描边。[ default: 0 ]
                            },
                            lineStyle: { // 单项线条样式。
                                normal: {
                                    opacity: 0.5, // 图形透明度
                                    color: 'rgba(44,80,238,1)',
                                }
                            },
                            areaStyle: { // 单项区域填充样式
                                normal: {
                                    color: 'rgba(44,80,238,0.8)' // 填充的颜色。[ default: "#000" ]
                                }
                            },
                            data: [
                                {
                                    value: obj.value,
                                    name: ''
                                },
                            ]
                        }
                    ]
                };

                chart.setOption( option );

                this[obj.id] = chart;
            },

            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '20%',
                        right: '1%',
                        bottom: '3%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b}:{c}',
                    },
                    color: ['#2C50EE','#6EF690'],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: '',
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#2C50EE',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(44,80,238,0.1)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(44,80,238,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[0],
                        },
                    ],
                };

                chart.setOption( option );

                this[ obj.id ] = chart;
            },

            sankeyChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                let datalist = [
                    {
                        name: "设备A"
                    },
                    {
                        name: "设备C"
                    },
                    {
                        name: "设备D"
                    },
                    {
                        name: "设备B"
                    },
                    {
                        name: "设备2"
                    },
                    {
                        name: "设备5"
                    },
                    {
                        name: "设备23"
                    },
                    {
                        name: "设备6"
                    },
                    {
                        name: "设备7"
                    },
                    {
                        name: "设备8"
                    },
                    {
                        name: "设备9"
                    },
                    {
                        name: "设备10"
                    },
                    {
                        name: "设备12"
                    },
                    {
                        name: "设备14"
                    },
                    {
                        name: "设备15"
                    },
                    {
                        name: "设备16"
                    },
                    {
                        name: "设备17"
                    },
                    {
                        name: "设备E",
                    },
                    {
                        name: "设备F"
                    },
                    {
                        name: "设备G"
                    },
                    {
                        name: "设备H"
                    },
                    {
                        name: "设备I"
                    },
                    {
                        name: "设备J"
                    },
                    {
                        name: "设备K"
                    },
                    {
                        name: "设备L"
                    },
                    {
                        name: "设备M"
                    },
                    {
                        name: "设备N"
                    },
                    {
                        name: "设备O"
                    }
                ];
                let linksData = [
                    {
                        source: "设备A",
                        target: "设备B",
                        value: 100
                    },
                    {
                        source: "设备C",
                        target: "设备2",
                        value: 30
                    },
                    {
                        source: "设备B",
                        target: "设备2",
                        value: 40
                    },
                    {
                        source: "设备D",
                        target: "设备23",
                        value: 15
                    },
                    {
                        source: "设备2",
                        target: "设备5",
                        value: 40
                    },
                    {
                        source: "设备2",
                        target: "设备23",
                        value: 20
                    },{
                        source: "设备5",
                        target: "设备6",
                        value: 15
                    },
                    {
                        source: "设备23",
                        target: "设备6",
                        value: 10
                    },
                    {
                        source: "设备5",
                        target: "设备7",
                        value: 25
                    },
                    {
                        source: "设备23",
                        target: "设备7",
                        value: 25
                    },
                    {
                        source: "设备6",
                        target: "设备8",
                        value: 20
                    },
                    {
                        source: "设备7",
                        target: "设备8",
                        value: 5
                    },
                    {
                        source: "设备6",
                        target: "设备9",
                        value: 10
                    },
                    {
                        source: "设备7",
                        target: "设备9",
                        value: 10
                    },
                    {
                        source: "设备6",
                        target: "设备10",
                        value: 5
                    },
                    {
                        source: "设备7",
                        target: "设备10",
                        value: 5
                    },
                    {
                        source: "设备6",
                        target: "设备12",
                        value: 5
                    },
                    {
                        source: "设备7",
                        target: "设备12",
                        value: 5
                    },
                    {
                        source: "设备8",
                        target: "设备14",
                        value: 20
                    },
                    {
                        source: "设备9",
                        target: "设备14",
                        value: 10
                    },
                    {
                        source: "设备9",
                        target: "设备15",
                        value: 10
                    },
                    {
                        source: "设备10",
                        target: "设备15",
                        value: 5
                    },
                    {
                        source: "设备9",
                        target: "设备16",
                        value: 20
                    },
                    {
                        source: "设备10",
                        target: "设备16",
                        value: 5
                    },
                    {
                        source: "设备12",
                        target: "设备17",
                        value: 5
                    },
                    {
                        source: "设备15",
                        target: "设备17",
                        value: 15
                    },
                    {
                        source: "设备14",
                        target: "设备E",
                        value: 5
                    },
                    {
                        source: "设备17",
                        target: "设备E",
                        value: 1
                    },
                    {
                        source: "设备15",
                        target: "设备F",
                        value: 5
                    },
                    {
                        source: "设备17",
                        target: "设备F",
                        value: 1
                    },
                    {
                        source: "设备15",
                        target: "设备G",
                        value: 5
                    },
                    {
                        source: "设备17",
                        target: "设备G",
                        value: 1,
                    },
                    {
                        source: "设备15",
                        target: "设备H",
                        value: 5
                    },
                    {
                        source: "设备17",
                        target: "设备H",
                        value: 1
                    },
                    {
                        source: "设备16",
                        target: "设备H",
                        value: 5
                    },
                    {
                        source: "设备8",
                        target: "设备I",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备I",
                        value: 5
                    },
                    {
                        source: "设备17",
                        target: "设备I",
                        value: 1
                    },
                    {
                        source: "设备9",
                        target: "设备J",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备J",
                        value: 5
                    },
                    {
                        source: "设备17",
                        target: "设备J",
                        value: 1
                    },
                    {
                        source: "设备14",
                        target: "设备K",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备K",
                        value: 5
                    },
                    {
                        source: "设备14",
                        target: "设备L",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备L",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备M",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备M",
                        value: 5
                    },
                    {
                        source: "设备10",
                        target: "设备N",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备N",
                        value: 5
                    },
                    {
                        source: "设备12",
                        target: "设备O",
                        value: 5
                    },
                    {
                        source: "设备16",
                        target: "设备O",
                        value: 5
                    },


                ];
                let Color = [
                    "#AF52DE",
                    "#FF9500",
                    "#35C759",
                    "#35C759",
                    "#2C50EE",
                    "#0EDCDA",
                    "#35C759",
                    "#FF9500",
                    "#AF52DE",
                    "#0EDCDA",
                    "#35C759",
                    "#2C50EE",
                    "#2C50EE",
                    "#0EDCDA",
                    "#35C759",
                    "#FF3B30",
                    "#2C50EE",
                    "#FF3B30",
                    "#FFCD03",
                    "#2C50EE",
                    "#FFCD03",
                    "#0EDCDA",
                    "#AF52DE",
                    "#FF3B30",
                    "#35C759",
                    "#35C759",
                    "#AF52DE",
                    "#FF9500",
                    "#1fa3de",
                    "#bbc951",
                    "#FFC14B",
                    "#b785a6",
                    "#61FEFF",
                    "#937FE6",
                    "#2B56D3",
                    "#87E7AA",
                    "#937FE6",
                    "#FF9B97",
                    "#8f23f5",
                    "#0576ea",
                    "#2cb8cf",
                    "#8A7EE0",
                    "#2cb8cf",
                    "#4e70f0",
                    "#1fa3de",
                    "#bbc951",
                    "#FFC14B",
                    "#b785a6",

                ];


                let itemStyleColor = [];
                let labelSource = [];
                let isLeft = ['设备E','设备F','设备G','设备H','设备I','设备J','设备K','设备L','设备M','设备N','设备O',];

                for (let i = 0; i < datalist.length; i++) {
                    datalist[i].label = {
                        normal: {
                            position: isLeft.indexOf( datalist[i].name ) !== -1 ? 'left' : 'right'
                        }
                    };
                    labelSource.push( isLeft.indexOf( datalist[i].name ) !== -1 ? 'left' : 'right' );
                }

                for (let d = 0; d < datalist.length; d++) {
                    datalist[d].itemStyle = {
                        normal: {
                            color: Color[d]
                        }
                    };
                    itemStyleColor.push(datalist[d]);
                }

                var option = {
                    tooltip: {
                        show: false,
                        trigger: "item",
                        triggerOn: "mousemove",
                        formatter: function(params) {
                            if (params.name == "公共平台") {
                                return " 公共平台 "
                            } else {
                                let value = params.data.value;
                                if (!value && value !== 0) return 0;
                                let str = value.toString();
                                let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                                if (params.data.source == "公共平台") {
                                    return params.data.target + " : " + str.replace(reg, "$1,");
                                } else {
                                    return params.data.source + " : " + str.replace(reg, "$1,");
                                }
                            }
                        }
                    },
                    series: [{
                        type: "sankey",
                        layout: "none",
                        top: "4%",
                        bottom: "1%",
                        left: 0,
                        right: 0,
                        nodeGap: 10,
                        nodeWidth: 10,
                        focusNodeAdjacency: "allEdges",
                        data: itemStyleColor,
                        links: linksData,
                        label: {
                            normal: {
                                color: "#535763",
                                fontSize: 14,
                            }
                        },
                        lineStyle: {
                            normal: {
                                opacity: 0.2,
                                color: "source",
                                curveness: 0.5
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                borderColor: "transparent"
                            }
                        }
                    }]
                };

                chart.setOption( option );
            },

            switchChange( ) {
                this.$refs.controlDialog.dialogVisible = true;
            },

        },
        mounted() {
            this.tabClick( this.tabActIndex );

            this.sankeyChartLoad(
                {
                    names: ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210,153, 133, 100, 180, 199, 233, 210,233, 233, 200, 180, ],
                    ],
                    id: 'sankeyChart',
                    title: '功率（kW）',
                }
            );
        }
    }
</script>

<style lang="less">
    .clgl_wrap {
        width: 100%;
        height: 100%;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;
            position: relative;
            padding-top: 4px;

            >.tab-box {
                width: 220px;
                height: 32px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #CFD1D8;
                box-sizing: border-box;
                margin-bottom: 35px;

                >span {
                    display: inline-block;
                    width: 109px;
                    height: 32px;
                    line-height: 30px;
                    text-align: center;
                    position: relative;
                    top: -1px;
                    box-sizing: border-box;
                    color: #9A9FAF;


                    &.is_act {
                        background: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid #2C50EE;
                        font-weight: 600;
                        color: #2C50EE;

                        &:nth-of-type(1) {
                            left: -1px;
                        }

                        &:nth-of-type(1) {
                            right: -1px;
                        }
                    }
                }

                >.el-button {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 104px;
                    height: 40px;
                }
            }

            >.panel-box {
                width: 100%;
                margin-bottom: 28px;

                &:nth-of-type( 2 ) {
                    height: 280px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 28px;

                    >.panel-item {
                        height: 100%;
                        width: 375px;
                        background: #FFFFFF;
                        border-radius: 8px;

                        >.item-head {
                            padding: 20px 30px;
                            width: 100%;
                            height: 72px;
                            border-bottom: 1px solid #EEEFF2;
                            box-sizing: border-box;

                            >.item-head-icon {
                                vertical-align: middle;
                            }

                            >.item-head-title {
                                display: inline-block;
                                vertical-align: middle;
                                font-size: 16px;
                                font-weight: 600;
                                color: #535763;
                                margin-left: 7px;
                            }

                            >.hy_switch {
                                float: right;
                            }
                        }

                        >.chart-box {
                            width: 100%;
                            height: calc( 100% - 72px );
                        }
                    }

                    &.is_composite_plan {
                        height: 120px;
                        display: flex;
                        justify-content: space-between;

                        >.panel-item {
                            width: 375px;
                            height: 100%;
                            background: #FFFFFF;
                            border-radius: 8px;
                            padding: 44px 28px;
                            box-sizing: border-box;

                            >.item-label {
                                display: inline-block;
                                vertical-align: middle;
                                font-size: 16px;
                                font-weight: 600;
                                color: #0E1526;
                                line-height: 32px;

                                &:before {
                                    content: ' ';
                                    display: inline-block;
                                    vertical-align: middle;
                                    width: 28px;
                                    height: 32px;
                                    background-image: url("../../assets/images/clgl/icon_5.png");
                                    background-repeat: no-repeat;
                                    background-position: center center;
                                    margin-right: 6px;
                                }
                            }

                            >.el-switch {
                                float: right;
                            }
                        }
                    }
                }

                &:nth-of-type( 3 ) {
                    height: 376px;
                    margin-bottom: 28px;

                    >.panel-item {
                        display: inline-block;
                        vertical-align: top;
                        height: 100%;
                        background: #FFFFFF;
                        border-radius: 8px;
                        padding: 40px;
                        box-sizing: border-box;

                        &:nth-of-type( 1 ) {
                            width: 375px;
                            margin-right: 28px;
                            background-image: url("../../assets/images/clgl/bg_line.png");
                            background-repeat: no-repeat;
                            background-position: center center;

                            >.item-box {
                                display: inline-block;
                                vertical-align: top;
                                width: 50%;
                                height: 140px;
                                box-sizing: border-box;

                                >.item-num {
                                    font-size: 25px;
                                    font-weight: 600;
                                    color: #000000;
                                    line-height: 30px;
                                    padding-top: 48px;

                                    >span {
                                        font-size: 15px;
                                    }
                                }

                                >.item-label {
                                    margin-top: 9px;
                                    font-size: 14px;
                                    color: #535763;
                                }

                                &:nth-of-type( 2n ) {
                                    padding-left: 40px;
                                }
                            }
                        }

                        &:nth-of-type( 2 ) {
                            width: calc( 100% - 375px - 28px );

                            >.chart-box {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    &.is_composite_plan {
                        height: 660px;

                        >.left-panel {
                            display: inline-block;
                            vertical-align: top;
                            width: 375px;
                            height: 100%;
                            background: #FFFFFF;
                            border-radius: 8px;
                            margin-right: 28px;
                            padding: 40px 0 0;
                            box-sizing: border-box;
                            position: relative;

                            >.panel-title {
                                margin-left: 40px;
                            }

                            >.panel-btn {
                                position: absolute;
                                right: 40px;
                                top: 37px;
                                width: 144px;
                                height: 36px;
                                line-height: 34px;
                                background: rgba(44, 80, 238, 0.06);
                                border-radius: 18px;
                                border: 1px solid rgba(44, 80, 238, 0.1);
                                box-sizing: border-box;
                                text-align: center;
                                font-size: 14px;
                                color: #2C50EE;
                            }

                            >.panel-content {
                                width: 100%;
                                height: calc( 100% - 28px - 25px );
                                margin-top: 25px;
                                background-image: url("../../assets/images/clgl/bg_flow_1.png");
                                background-repeat: no-repeat;
                                background-position: center top;
                                position: relative;

                                >.flow-label {
                                    position: absolute;
                                    font-size: 16px;
                                    font-weight: 600;
                                    color: #0E1526;
                                    width: 120px;
                                    line-height: 50px;
                                    text-align: center;

                                    &.is_white {
                                        color: #ffffff;
                                    }

                                    &:nth-of-type( 1 ) {
                                        top: 0px;
                                        left: 135px;
                                    }

                                    &:nth-of-type( 2 ) {
                                        top: 140px;
                                        left: 135px;
                                    }

                                    &:nth-of-type( 3 ) {
                                        top: 220px;
                                        left: 135px;
                                    }

                                    &:nth-of-type( 4 ) {
                                        top: 314px;
                                        left: 135px;
                                    }

                                    &:nth-of-type( 5 ) {
                                        top: 410px;
                                        left: 135px;
                                    }

                                    &:nth-of-type( 6 ) {
                                        top: 490px;
                                        left: 135px;
                                    }
                                }
                            }
                        }

                        >.right-panel {
                            display: inline-block;
                            vertical-align: top;
                            width: calc( 100% - 375px - 28px );
                            height: 100%;


                            >.panel-item {
                                width: 100%;
                                height: 232px;
                                background: #FFFFFF;
                                border-radius: 8px;

                                &:nth-of-type( 1 ) {
                                    margin-bottom: 28px;
                                    padding: 66px 100px;
                                    box-sizing: border-box;
                                    display: flex;
                                    justify-content: space-between;

                                    >.item-box {
                                        width: 200px;
                                        height: 100px;
                                        background-image: url("../../assets/images/clgl/bg_item_1.png");
                                        background-size: 100% 100%;
                                        padding: 19px 0 0 28px;
                                        box-sizing: border-box;

                                        .item-num {
                                            font-size: 25px;
                                            font-weight: 600;
                                            color: #000000;
                                            line-height: 35px;

                                            >span {
                                                font-size: 15px;
                                                margin-left: 3px;
                                            }
                                        }

                                        .item-label {
                                            font-size: 14px;
                                            color: #535763;
                                        }

                                        &:nth-of-type( 2 ) {
                                            background-image: url("../../assets/images/clgl/bg_item_2.png");
                                        }

                                        &:nth-of-type( 3 ) {
                                            background-image: url("../../assets/images/clgl/bg_item_3.png");
                                        }

                                        &:nth-of-type( 4 ) {
                                            background-image: url("../../assets/images/clgl/bg_item_4.png");
                                        }
                                    }
                                }

                                &:nth-of-type( 2 ) {
                                    height: calc( 100% - 232px - 28px );
                                    padding: 40px;
                                    box-sizing: border-box;
                                }
                            }
                        }
                    }
                }

                &:nth-of-type( 4 ) {
                    width: 100%;
                    height: 580px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    padding: 40px;
                    box-sizing: border-box;
                    margin-bottom: 28px;

                    >.flow-box {
                        width: 100%;
                        height: calc( 100% - 28px );
                        background-image: url("../../assets/images/clgl/bg_flow.png");
                        background-repeat: no-repeat;
                        background-position: 0 17px;
                        position: relative;

                        .flow-label {
                            font-size: 16px;
                            color: #0E1526;
                            line-height: 21px;
                            font-weight: 600;
                            position: absolute;
                            text-align: center;
                            min-width: 170px;

                            &:nth-of-type( 1 ) {
                                top: 156px;
                                left: -3px;
                            }

                            &:nth-of-type( 2 ) {
                                top: 156px;
                                left: 438px;
                            }

                            &:nth-of-type( 3 ) {
                                top: 156px;
                                left: 892px;
                            }

                            &:nth-of-type( 4 ) {
                                top: 156px;
                                left: 1304px;
                            }

                            &:nth-of-type( 5 ) {
                                top: 425px;
                                left: 0px;
                            }

                            &:nth-of-type( 6 ) {
                                top: 425px;
                                left: 439px;
                            }

                            &:nth-of-type( 7 ) {
                                top: 425px;
                                left: 890px;
                            }

                            &:nth-of-type( 8 ) {
                                top: 425px;
                                left: 1304px;
                            }

                            &:nth-of-type( 9 ) {
                                top: 286px;
                                left: 890px;
                            }
                        }

                        .flow-value {
                            color: #0E1526;
                            font-size: 14px;
                            position: absolute;
                            padding: 3px 7px;
                            box-sizing: border-box;
                            min-width: 80px;
                            line-height: 20px;
                            background-color: rgba(249, 250, 254, 0.8);
                            border-radius: 4px;
                            border: 1px solid #dddddd;
                            text-align: center;

                            &:after {
                                content: ' ';
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 0;
                                height: 0;
                                border-left: 5px solid transparent;
                                border-right: 5px solid transparent;
                                border-top: 8px solid #F9FAFE;
                            }

                            &:before {
                                content: ' ';
                                position: absolute;
                                bottom: -10px;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 0;
                                height: 0;
                                border-left: 6px solid transparent;
                                border-right: 6px solid transparent;
                                border-top: 10px solid #dddddd;
                            }

                            &.is_left {

                                &:after {
                                    bottom: 0;
                                    top: 0;
                                    right: unset;
                                    left: -8px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-right: 8px solid #F9FAFE;
                                    border-left: unset;
                                }

                                &:before {
                                    bottom: 0;
                                    top: 0;
                                    right: unset;
                                    left: -10px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-right: 10px solid #dddddd;
                                    border-left: unset;
                                }
                            }

                            &.is_right {

                                &:after {
                                    bottom: 0;
                                    top: 0;
                                    left: unset;
                                    right: -8px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-left: 8px solid #F9FAFE;
                                    border-right: unset;
                                }

                                &:before {
                                    bottom: 0;
                                    top: 0;
                                    left: unset;
                                    right: -10px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-left: 10px solid #dddddd;
                                    border-right: unset;
                                }
                            }

                            &.is_top {
                                text-align: left;

                                &:after {
                                    top: -8px;
                                    bottom: unset;
                                    border-bottom: 8px solid #F9FAFE;
                                    border-top: unset;
                                }

                                &:before {
                                    top: -10px;
                                    bottom: unset;
                                    border-bottom: 10px solid #dddddd;
                                    border-top: unset;
                                }
                            }

                            &:nth-of-type( 1 ) {
                                top: 25px;
                                left: 179px;
                            }

                            &:nth-of-type( 2 ) {
                                top: 38px;
                                left: 640px;
                            }

                            &:nth-of-type( 3 ) {
                                top: 29px;
                                left: 1088px;
                            }

                            &:nth-of-type( 4 ) {
                                top: 147px;
                                left: 643px;
                            }

                            &:nth-of-type( 5 ) {
                                top: 155px;
                                left: 1092px;
                            }

                            &:nth-of-type( 6 ) {
                                top: 227px;
                                left: 339px;
                            }

                            &:nth-of-type( 7 ) {
                                top: 227px;
                                left: 568px;
                            }

                            &:nth-of-type( 8 ) {
                                top: 196px;
                                left: 1050px;
                            }

                            &:nth-of-type( 9 ) {
                                top: 285px;
                                left: 1062px;
                            }

                            &:nth-of-type( 10 ) {
                                top: 234px;
                                left: 1262px;
                            }

                            &:nth-of-type( 11 ) {
                                top: 234px;
                                left: 1432px;
                            }

                            &:nth-of-type( 12 ) {
                                top: 302px;
                                left: 182px;
                            }

                            &:nth-of-type( 13 ) {
                                top: 415px;
                                left: 182px;
                            }

                            &:nth-of-type( 14 ) {
                                top: 302px;
                                left: 634px;
                            }

                            &:nth-of-type( 15 ) {
                                top: 427px;
                                left: 634px;
                            }

                            &:nth-of-type( 16 ) {
                                top: 325px;
                                left: 1155px;
                            }

                            &:nth-of-type( 17 ) {
                                top: 423px;
                                left: 1170px;
                            }
                        }
                    }
                }

                &:nth-of-type( 5 ) {
                    width: 100%;
                    height: 548px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    padding: 40px;
                    box-sizing: border-box;
                    margin-bottom: 0;

                    >.chart-box {
                        width: 100%;
                        height: calc( 100% - 28px );
                    }
                }
            }

            .head-switch {
                position: fixed;
                top: 80px;
                right: 28px;

                .head-switch-text {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 16px;
                    font-weight: 600;
                    color: #333;
                    margin-right: 7px;
                }
            }
        }
    }
</style>
